import React, { Component } from 'react';
import {
    WhiteSpace,
    Flex
} from 'antd-mobile';
import { connect } from 'dva';
import MyScroll from '../../components/MyScroll/MyScroll';
import { routerRedux } from 'dva/router';
import { rank_all } from './Rank.less';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';

class Rank extends Component {
    constructor(props) {
        super(props);

    }



    componentDidMount() {

    }







    render() {
        const { rank, dispatch } = this.props;
        const { list=[] } = rank;

        return (
            <Flex style={{
                height:"100%",
                position:'relative',
            }} direction="column"
            >

                <NavTopBar dispatch={dispatch} title="排行榜"></NavTopBar>
                <MyScroll
                    // getAlloyTouch={ this.getAlloyTouch }
                >
                    <Flex direction="row" wrap="wrap" className={rank_all}>
                        {
                            list.map((v,i,a)=>{
                                return (
                                    <Flex
                                        onClick={()=>{
                                           dispatch(routerRedux.push(`/goodsDetail/${v.specId}`))
                                        }}
                                        key={i}
                                        className="item"
                                    >
                                            <div className="img">
                                                <NoLazyImg src={ v.image } ></NoLazyImg>
                                                <div className={i<3?"paihang":"paihang1"}>
                                                    <span style={{display:"inline-block",marginTop:".05rem"}}>
                                                        {i+1}
                                                    </span>
                                                </div>
                                                {/*<img src={require(i<3?"../../assets/img/paihangbang.png":"../../assets/img/paihangbang1.png")} className="im"/>*/}
                                                {/*<span className="am">{i+1}</span>*/}
                                            </div>
                                            <Flex.Item style={{borderBottom:"1px solid #e5e5e5"}}>
                                                <div className="name text-two-eli">{ v.name }</div>
                                                <div className="price">￥{v.storePrice}</div>
                                                <div className="evaluate">
                                                    {/*<span style={{ marginRight:"0.2rem" }}>{v.commentnum }条评价</span>*/}
                                                    <span>销量：{ v.salenum }</span>
                                                </div>
                                            </Flex.Item>

                                    </Flex>
                                )
                            })
                        }

                    </Flex>
                </MyScroll>

            </Flex>

        );
    }
}

export default connect(({ rank }) => ({ rank }))(Rank);
